<template>
  <view class="mine-container">
<view id="main" style="width: 100%;height: 370px;"></view>
<view>
		<el-table
		    :data="tableData"
		    stripe
		    style="width: 100%"
			:row-class-name="tableRowClassName">
		    <el-table-column
		      prop="id"
		      label="排名"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="name"
		      label="姓名"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="dept"
		      label="部门"
			  >
		    </el-table-column>
			<el-table-column
			  prop="sale"
			  label="销售额"
			  >
			</el-table-column>
			<el-table-column
			  prop="saleNumber"
			  label="销售单量"
			  >
			</el-table-column>
			<el-table-column
			  prop="finish"
			  label="完成率"
			  >
			</el-table-column>
		  </el-table>
	</view>
  </view>
</template>

<script>
  import storage from '@/utils/storage'
  import * as echarts from 'echarts';
  

  
  export default {
    data() {
      return {
		  tableData:[]
        }
    },
onLoad() {
	uni.request({
		url:'http://localhost:8089/crmdemo/contract/querySalesRank',
		success: (res) => {
			
			this.tableData = res.data.result;
	
		}
	});
},
mounted() {
	var chartDom = document.getElementById('main');
	var myChart = echarts.init(chartDom);
	var option;
	option = {
	  xAxis: {
	    type: 'category',
	    data: ['admin', 'ldh', 'hcw', 'root', 'wyz', 'cjy', 'zxc']
	  },
	  yAxis: {
	    type: 'value'
	  },
	  series: [
	    {
	      data: [2707031, 553741,509000,474970, 309000, 259000, 109000],
	      type: 'bar',
	      showBackground: true,
	      backgroundStyle: {
	        color: 'rgba(180, 180, 180, 0.2)'
	      }
	    }
	  ]
	}
	option && myChart.setOption(option)
},
    methods: {
		
	}
   
  }
</script>






<style lang="scss">
  page {
    background-color: #f5f6f7;
  }

  .mine-container {
    width: 100%;
    height: 100%;


    .header-section {
      padding: 15px 15px 45px 15px;
      background-color: #3c96f3;
      color: white;

      .login-tip {
        font-size: 18px;
        margin-left: 10px;
      }

      .cu-avatar {
        border: 2px solid #eaeaea;

        .icon {
          font-size: 40px;
        }
      }

      .user-info {
        margin-left: 15px;

        .u_title {
          font-size: 18px;
          line-height: 30px;
        }
      }
    }

    .content-section {
      position: relative;
      top: -50px;

      .mine-actions {
        margin: 15px 15px;
        padding: 20px 0px;
        border-radius: 8px;
        background-color: white;

        .action-item {
          .icon {
            font-size: 28px;
          }

          .text {
            display: block;
            font-size: 13px;
            margin: 8px 0px;
          }
        }
      }
    }
  }
</style>
